import { Card, Row, Col } from "antd";
import { useNavigate } from "react-router-dom";
import "./index.scss";

const SetUp = () => {
  // 定义跳转
  const navigate = useNavigate();
  const tz = (link: string) => {
    navigate("/home" + link);
  };

  return (
    <>
      <div className="Breadcrumb">
        <div className="title">设置</div>
        <div className="hr"></div>
      </div>

      <div className="site-card-wrapper">
        <Row gutter={16}>
          <Col span={4}>
            <Card
              hoverable
              onClick={() => {
                tz("/ApproveAlerts");
              }}
            >
              <div className="Card">
                <img
                  src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E8%AE%BE%E7%BD%AE/u4369.png"
                  alt=""
                />
                <span>审批预警设置</span>
              </div>
            </Card>
          </Col>
          <Col span={4}>
            <Card
              hoverable
              onClick={() => {
                tz("/Contact");
              }}
            >
              <div className="Card">
                <img
                  src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E8%AE%BE%E7%BD%AE/u4372.png"
                  alt=""
                />
                <span>联系方式</span>
              </div>
            </Card>
          </Col>
          <Col span={4}>
            <Card
              hoverable
              onClick={() => {
                tz("/ReportTo");
              }}
            >
              <div className="Card">
                <img
                  src="https://img.axureshop.com/07/b8/9b/07b89b58b7ef43ddb3340e5ed6e394be/images/%E8%AE%BE%E7%BD%AE/u4375.png"
                  alt=""
                />
                <span>举报电话</span>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </>
  );
};
export default SetUp;
